<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>add dbConfig</title>
    <link rel="stylesheet" th:href="@{/editor/css/editormd.css}"/>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
</head>
<body>
<div>
    <div class="layui-form" style="padding-top: 30px;width:500px;padding-left: 30px;">
        <input type="text" name="config_id" id="config_id" hidden th:value="${dbConfig.id}"/>


        <div class="layui-form-item">
            <label class="layui-form-label">url</label>
            <div class="layui-input-block" style="width: 180px" >
                <input type="text" name="connectName" id="connectName" th:value="${dbConfig.connectName}" required  lay-verify="required" placeholder="please add connectName" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">type</label>
            <div class="layui-input-block" style="width: 180px">
                <select name="city" id="typeSelector" lay-verify="required" th:field="${dbConfig.type}">
                    <option value="">please select</option>
                    <option value="MySQL">MySQL</option>
                    <option value="Hive">Hive</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">url</label>
            <div class="layui-input-block" style="width: 180px" >
                <input type="text" name="url" id="urlInput" th:value="${dbConfig.url}" required  lay-verify="required" placeholder="please add url" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">user</label>
            <div class="layui-input-block" style="width: 180px">
                <input type="text" name="user" id="nameInput" th:value="${dbConfig.user}" required  lay-verify="required" placeholder="please add userName" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">password</label>
            <div class="layui-input-inline" style="width: 180px">
                <input type="password" name="password" id="inputPassword" th:value="${dbConfig.pwd}" required lay-verify="required" placeholder="please add password" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-filter="formDemo" onclick="testConnection()">testConnection</button>
                <button class="layui-btn" lay-filter="formDemo" onclick="save()">save</button>
                <button type="reset" class="layui-btn layui-btn-primary">reset</button>
            </div>
        </div>
    </div>


    <iframe src="" frameborder="0" name="frameName" hidden></iframe>
</div>

<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/editor/editormd.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/admin/js/addBlog.js}"></script>

<script type="text/javascript">
    function testConnection(){
        var type=$("#typeSelector").val();
        var url=$("#urlInput").val();
        var user=$("#nameInput").val();
        var pwd=$("#inputPassword").val();
        if(type.length==0){
            layer.alert('type is empty')
        }

        $.ajax({
            type: "post",
            url: "/db/test_connection",
            data: {
                "type":type,
                "url":url,
                "user":user,
                "pwd":pwd
            },
            dataType: "json",
            success: function(data){
                if (data.code==0){
                    layer.alert('connect success')
                    //alert("测试连接成功");
                }
                else if (data.code=-1){
                    layer.alert(data.msg);
                }
            }
        });
    }

    function save(){

        var id=$("#config_id").val();
        var connectName=$("#connectName").val();
        var type=$("#typeSelector").val();
        var url=$("#urlInput").val();
        var user=$("#nameInput").val();
        var pwd=$("#inputPassword").val();
        if(type.length==0){
            layer.alert('type is empty')
        }
        $.ajax({
            type: "post",
            url: "/db/update",
            data: {
                "id":id,
                "connectName":connectName,
                "type":type,
                "url":url,
                "user":user,
                "pwd":pwd
            },
            dataType: "json",
            success: function(data){
                if (data.code==0){
                    alert("修改成功");
                    //layer.alert("添加成功");
                    window.location.href="/db/dbConfig.html";
                }
                else if (data.code=-1){
                    layer.alert(data.msg);
                }
            }
        });
    }
</script>

</body>
</html>
